<template>
  <view>
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="听力训练" />
    </view>
    <view>
      <view class="autoplayer">
        <audio-cc :title="resource.hearingName" :src="resource.hearingUrl"></audio-cc>
      </view>
      <view class="suggestion">
        <text>资源加载需要10秒到20秒左右</text><br />
        <text>请耐心等待一下</text>
      </view>
  </view>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import * as http from '@/utils/http'
  const resource = ref({})
  onLoad(async (option) => {

    const resourceId = option.resourceId
    //获取单个资源
    const result = await http.getRequest("/xhyy/hearing/get", {
      id: resourceId
    })
    if (result.code == 0) {
      resource.value = result.data
    } else {
      uni.showToast({
        title: '获取资源失败',
        icon: 'error',
        duration: 1000
      })
    }
  })
  
  function goback() {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }
  
  .autoplayer{
    margin-top: 30rpx;
  }
  .suggestion{
    text-align: center;
    font-size: 32rpx;
    color: darkred;
  }
</style>